<template>
  <div>
    <el-header class="me-area">
      <el-row class="me-header">
        <el-col :span="3" :offset="3" class="me-header-left">
          <router-link to="/" class="me-title">
            <h4 style="font-family: Times New Roman, Times, serif; color: #5fb878">动物保护协会</h4>
          </router-link>
        </el-col>

        <el-col v-if="!simple" :span="12" :offset="0">
          <el-menu
            :router="true"
            menu-trigger="click"
            active-text-color="#5FB878"
            :default-active="activeIndex"
            mode="horizontal"
          >
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/2">新闻热点</el-menu-item>
            <el-menu-item index="/1">宣传资料</el-menu-item>
            <el-menu-item index="/3">活动信息</el-menu-item>
            <!-- <el-menu-item index="/activityApply">活动申请</el-menu-item>-->
            <el-menu-item index="/feedback">留言板</el-menu-item>
            <!--<el-col :span="2" :offset="1">
              <el-menu-item index="/write"
                ><i class="el-icon-edit"></i>写文章</el-menu-item
              >
            </el-col>-->
          </el-menu>
        </el-col>

        <template v-else>
          <slot></slot>
        </template>

        <el-col :span="4" :offset="0">
          <el-menu
            :router="true"
            menu-trigger="click"
            mode="horizontal"
            active-text-color="#5FB878"
          >
            <template v-if="!user.login">
              <el-menu-item index="/login">
                <el-button type="text">登录</el-button>
              </el-menu-item>
              <el-menu-item index="/register">
                <el-button type="text">注册</el-button>
              </el-menu-item>
            </template>

            <template v-else>
              <el-submenu index="2">
                <template slot="title">
                  <img class="me-header-picture" :src="user.avatar"/>
                  <span>{{ user.userName }}</span>
                </template>
                <el-menu-item @click="logout" index="/login"
                ><i class="el-icon-back"></i>退出
                </el-menu-item
                >
                <el-menu-item @click="updateInfo" index="">
                  <i class="el-icon-edit"></i>修改信息
                </el-menu-item
                >
              </el-submenu>
            </template>
          </el-menu>
        </el-col>
      </el-row>
    </el-header>


    <el-dialog title="修改信息" :visible.sync="open" width="500px" append-to-body>
      <el-form  label-width="120px" :model="formLabelAlign" size="small" ref="form"
               :rules="rules">
        <el-form-item label="邮箱(账户)" prop="email">
          <el-input v-model="formLabelAlign.email" placeholder="请输入邮箱" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="userName">
          <el-input v-model="formLabelAlign.userName" placeholder="请输入用户昵称"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="formLabelAlign.password" placeholder="请输入密码" type='password'></el-input>
        </el-form-item>
       <!-- <el-row :gutter="30">
          <el-col :span="12">
            <el-upload
              class="upload-demo"
              action="/upload/uploadImg"
              :headers="{'Content-Type': 'multipart/form-data'}"
              :on-success="handleUploadSuccess1">
              <el-button size="mini" type="primary">上传头像</el-button>
            </el-upload>
            <div v-if="photo!== ''" style="margin-top: 10px">
              <img :src="photo" alt="" style="width: 100px;height: 100px">
            </div>
          </el-col>
        </el-row>-->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
  import { getToken , getUserInfo , removeToken } from '@/request/token'
  import { register,getUserById,updateUser } from "@/api/login";

  export default {
    name : "BaseHeader" ,
    props : {
      activeIndex : String ,
      simple : {
        type : Boolean ,
        default : false ,
      } ,
    } ,
    data () {
      return {
        open:false,
        formLabelAlign:{},
        rules : {
          userName : [
            { required : true , message : "用户昵称不能为空" , trigger : "blur" }
          ] ,
          email : [
            {
              type : "email" ,
              message : "请输入正确的邮箱地址" ,
              trigger : ["blur" , "change"] ,
              required : true
            }
          ] ,
        } ,
        documents : '' ,
        photo : '',
        id :''
      };
    } ,
    computed : {
      user () {
        console.log ( getToken () )
        let login = ( getToken () != undefined && getToken () != '' );
        let avatar = "";
        let userName = ''
        console.log ( getUserInfo () )
        if ( getUserInfo () ) {
          avatar = JSON.parse ( getUserInfo () ).avatar;
          userName = JSON.parse ( getUserInfo () ).userName;
         this.formLabelAlign  = JSON.parse ( getUserInfo () )
        }
        return {
          login ,
          avatar ,
          userName
        };
      } ,
    } ,

    methods : {
      logout () {
        const _this = this;
        _this.$axios
          .post (
            "/logout" ,
            {} ,
            {
              headers : {
                Authorization : localStorage.getItem ( "token" ) ,
              } ,
            }
          )
          .then ( ( res ) => {
            console.log ( '00' )
            _this.$store.commit ( "REMOVE_INFO" );
            _this.$router.push ( "/login" );
          } );
      } ,
      updateInfo(){
          this.open = true
      },
      handleUploadSuccess1 ( res ) {
        this.photo = '/api' + res.data
        this.formLabelAlign.photo = res.data
        this.$message ( {
          message : res.message ,
          type : 'success'
        } )
      } ,
      submitForm () {
        this.$refs[ "form" ].validate ( valid => {
          if ( valid ) {
            updateUser(this.formLabelAlign).then(res=>{
              this.$message({type: 'success', message: '修改成功', showClose: true})
              this.open = false
              this.logout()
            })
          }
        } )
      } ,
      cancel(){
        this.open = false
      },
      // 获取用户信息

    } ,
  };
</script>

<style>
  .el-header {
    position: fixed;
    z-index: 1024;
    min-width: 100%;
    box-shadow: 0 2px 3px hsla(0, 0%, 7%, 0.1), 0 0 0 1px hsla(0, 0%, 7%, 0.1);
  }

  .me-title {
    margin-top: 10px;
    font-size: 24px;
  }

  .me-header-left {
    margin-top: 10px;
  }

  .me-title img {
    max-height: 2.4rem;
    max-width: 100%;
  }

  .me-header-picture {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 50%;
    vertical-align: middle;
    background-color: #5fb878;
  }
</style>
